<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .active{
        color: red;
      }
    </style>
</head>
<body>
    <div id="app">
      <!-- 1.基本绑定class -->
        <h2 :class="classes">Hello World</h2>
      
      <!-- 2.动态class可以写对象语法 -->
      <!-- <button :class="isActive ? 'active':''" @click="btnClick">我是按钮</button> -->

      <!-- 对象语法的基本使用 (掌握)-->
      <!-- 我们可以传给:class一个对象，以动态地切换class -->
      <!-- <button :class="{active:isActive}" @click="btnClick">我是按钮</button> -->

      <!-- 对象语法的多个键值对 -->
      <!-- <button :class="{actice:isActive, why:true, kebe:false}"></button> -->

      <!-- 动态class可以和普通class并列使用 -->
      <!-- <button class="abc" :class="{actice:isActive, why:true, kebe:false}"></button> -->

      <!-- 因为可以动态绑定对象所以可以抽离到方法当中 -->
      <button class="abc" :class="getDynamicClass()" @click="btnClick">按钮</button>

      <!-- 3.动态class可以写数组语法 -->
      <h2 :class="['abc','cba']"></h2>
      <h2 :class="['abc',classname]"></h2>
      <h2 :class="['abc',{active:isActive}]"></h2>

    </div>

    <script src="./lib/Vue.js"></script>
    <script>
        const app = Vue.createApp({
            data() {
                return{
                  classes:'abc cba nba',
                  isActive:false,
                  classname:'cba'
                }
            },
            methods:{
              btnClick() {
                this.isActive = !this.isActive
              },
              getDynamicClass() {
                return {active:this.isActive, why:true, kebe:false}
              }
            }
        })
        app.mount("#app")
    </script>
</body>
</html>